<template>
  <div>
    <!-- 按钮来打开命名设置的弹窗 -->
    <el-button @click="openDialog">设置导出格式</el-button>
    <!-- 命名格式设置的弹窗 -->
    <el-dialog title="设置导出文件命名格式" :visible.sync="dialogVisible" width="600px">
      <div>
        <el-row>
          <!-- 固定字段选择 -->
          <el-col :span="24">
            <el-select v-model="selectedFields" multiple placeholder="选择固定字段" style="width: 100%;">
              <el-option v-for="item in availableFields" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row style="margin-top: 10px;">
          <!-- 自定义文本输入框 -->
          <el-input v-model="customText" placeholder="请输入自定义内容（可选）" clearable></el-input>
        </el-row>

        <el-row style="margin-top: 10px;">
          <!-- 拖拽排序组件 -->
          <draggable v-model="sortedFields" @end="onSortEnd" tag="ul">
            <li v-for="(item, index) in sortedFields" :key="index" class="sortable-item">
              <el-tag>{{ item }}</el-tag>
            </li>
          </draggable>
        </el-row>

        <el-row style="margin-top: 20px;">
          <!-- 实时预览命名结果 -->
          <el-alert
              title="文件命名预览"
              :description="getFileNamePreview()"
              type="info"
              show-icon
          />
        </el-row>
      </div>

      <!-- 弹窗底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveFileNameFormat">保存设置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      dialogVisible: false,  // 控制弹窗显示
      availableFields: ['学号', '姓名', '班级'],  // 可选的固定字段
      selectedFields: [],  // 用户选择的字段
      customText: '',  // 自定义输入文本
      sortedFields: []  // 排序后的字段
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    onSortEnd() {
      // 拖拽排序结束的回调
    },
    getFileNamePreview() {
      // 获取文件名的预览结果
      const joinedFields = this.sortedFields.join('_');
      return this.customText ? `${this.customText}_${joinedFields}` : joinedFields;
    },
    saveFileNameFormat() {
      // 保存文件命名格式
      this.dialogVisible = false;
      // 根据业务逻辑处理保存结果
    }
  }
};
</script>

<style>
.sortable-item {
  margin: 5px 0;
  cursor: move;
}
</style>
